<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/search/./css/index.css">
    <link rel="stylesheet" type="text/css" href="/static/search/font/iconfont.css">
    <!--<script src="/static/search/./js/jquery-3.2.1.min.js"></script>-->
    <script src="/static/search/./js/jquery-1.12.4.js"></script>
    <title>Document</title>
</head>
<body>
<!--头部-->
<div class="header_head">
    <div class="header_head_box">
        <b class="header_head_p">
            <div style="overflow: hidden">
                <a href="http://gulimall.com" class="header_head_p_a1" style="width:73px;">
                    谷粒商城首页
                </a>
                <a href="/static/search/#" class="header_head_p_a">
                    <!--<img src="/static/search/img/img_05.png" style="border-radius: 50%;"/>-->
                    北京</a>
            </div>
            <div class="header_head_p_cs">
                <a href="/static/search/#" style="background: #C81623;color: #fff;">北京</a>
                <a href="/static/search/#">上海</a>
            </div>
        </b>
        <ul>
            <li>
                <a  th:if="${session.loginUser==null}" href="http://auth.gulimall.com/login.html" class="li_2">你好，请登录</a>
                <a th:if="${session.loginUser!=null}">[[${session.loginUser.nickname}]] </a>
            </li>
            <li>
                <a th:if="${session.loginUser==null}" href="http://auth.gulimall.com/reg.html">免费注册</a>
            </li>
            <li>
                <a href="/static/search/#">我的订单</a>
            </li>
        </ul>
    </div>
</div>
<!--搜索导航-->
<div class="header_sous">
    <div class="logo">
        <a href="http://gulimall.com"><img src="/static/search/./image/logo1.jpg" alt=""></a>
    </div>
    <div class="header_form">
        <input type="text" placeholder="手机" id="keyword_input"   th:value="${param.keyword}"  />
        <!--        <a href="http://search.gulimall.com/list.html?catalog3Id="+$("#inputText").val()  >搜索</a>-->
        <a     href="javascript:searchByKeyword();">搜索</a>
    </div>
<!--    <a  href="javascript:void(0)"  onclick="searchByKeyword()">操你妈</a>-->
    <div class="header_ico">
        <div class="header_gw">
            <span><a href="/static/search/#">我的购物车</a></span>
            <img src="/static/search/image/settleup-@1x.png" />
            <span>0</span>
        </div>
        <div class="header_ko">
            <p>购物车中还没有商品，赶紧选购吧！</p>
        </div>
    </div>
</div>
<hr style="border: 1px solid red;margin-top: -7px;">
<!--热卖促销-->
<div class="JD_temai">
    <div class="JD_main">
        <div class="JD_left">
            <div class="hd">
                热卖推荐
            </div>
        </div>
    </div>
</div>
<!--手机-->
<div class="JD_ipone">
    <div class="JD_ipone_bar">
        <div class="JD_ipone_one a">
            <a href="/static/search/#">手机</a>
        </div>
        <i><img src="/static/search/image/right-@1x.png" alt=""></i>
        <div class="JD_ipone_one b">
            <a href="/static/search/#" class="qqq">手机通讯录 <img src="/static/search/image/down-@1x.png" alt=""></a>
        </div>
        <i><img src="/static/search/image/right-@1x.png" alt=""></i>
        <div  class="JD_ipone_one c">
<!--           遍历面包屑导航功能-->
            <a
     th:href="${nav.link}"
th:each="nav : ${result.navs}"><span th:text="${nav.navName}"></span>:<span th:text="${nav.navValue}"></span>  × </a>
        </div>
        <i><img src="/static/search/image/right-@1x.png" alt=""></i>
    </div>
</div>
<!--商品筛选和排序-->
<div class="JD_banner w">
    <div class="JD_nav">
        <div class="JD_selector">
            <!--手机商品筛选-->
            <div class="title">
                <h3><b>手机</b><em>商品筛选</em></h3>
                <div class="st-ext">共&nbsp;<span>10135</span>个商品 </div>
            </div>
            <div class="JD_nav_logo">
                <!--品牌-->
                <div class="JD_nav_wrap">
                    <div class="sl_key">
                        <span><b>品牌</b>：</span>
                    </div>
                    <div class="sl_value">
                        <div class="sl_value_logo">
                            <ul>
                                <li  th:each="brand :  ${result.brands}">
                                    <a href="/static/search/#"  th:href="${'javascript:searchProducts(&quot;brandId&quot;,'+brand.brandId+')'}">
                                        <img th:src="${brand.brandImg}" alt="">
                                        <div th:text="${brand.brandName}">
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="sl_ext">
                        <a href="/static/search/#">
                            更多
                            <i style='background: url("image/search.ele.png")no-repeat 3px 7px'></i>
                            <b style='background: url("image/search.ele.png")no-repeat 3px -44px'></b>
                        </a>
                        <a href="/static/search/#">
                            多选
                            <i>+</i>
                            <span>+</span>
                        </a>
                    </div>
                </div>
                <!--分类-->
                <div class="JD_nav_wrap">
                    <div class="sl_key">
                        <span><b>分类</b>：</span>
                    </div>
                    <div class="sl_value">
                        <div class="sl_value_logo">
                            <ul>
                                <li  th:each="catalog :  ${result.catalogs}">
                                    <a   th:text="${catalog.catalogName}"   th:href="${'javascript:searchProducts(&quot;catalog3Id&quot;,'+catalog.catalogId+')'}">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="sl_ext">
                        <a href="/static/search/#">
                            更多
                            <i style='background: url("image/search.ele.png")no-repeat 3px 7px'></i>
                            <b style='background: url("image/search.ele.png")no-repeat 3px -44px'></b>
                        </a>
                        <a href="/static/search/#">
                            多选
                            <i>+</i>
                            <span>+</span>
                        </a>
                    </div>
                </div>
                <!--价格-->
                <div class="JD_pre">
                    <div class="sl_key">
                        <span>价格：</span>
                    </div>
                </div>
                <!--系统-->
                <div class="JD_pre">
                    <div class="sl_key">
                        <span>系统：</span>
                    </div>
                    <div class="sl_value">
                    </div>
                </div>
                <!--其他的所有需要展示的属性-->
                <div class="JD_pre" th:each="attr  : ${result.attrs}">
                    <div class="sl_key">
                        <span  th:text="${attr.attrName}">屏幕尺寸：</span>
                    </div>
                    <div class="sl_value">
                        <ul>
                            <li th:each="val : ${attr.attrValue}">
                                <a  th:text="${val}"
                                th:href="${'javascript:searchProducts(&quot;attrs&quot;,&quot;'+attr.attrId+'_'+val+'&quot;)'}"
                                >
                                5.56英寸及以上</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--排序-->
        <div class="JD_banner_main">
            <!--商品精选-->
            <!--综合排序-->
            <div class="JD_con_right">
                <div class="filter">
                    <!--综合排序-->
                    <div class="filter_top">
                        <div class="filter_top_left"  th:with=" p =  ${param.sort},  priceRange = ${param.skuPrice}" >
                            <a    sort="hotScore" href="/static/search/#"
th:attr="style=${(#strings.isEmpty(p) || #strings.startsWith(p,'hotScore') )?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#FFF' }"
                            th:class="${(!#strings.isEmpty(p)    &&  #strings.startsWith(p,'hotScore')          &&    #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'  }"
                            >
                                综合排序
                            </a>
                            <a class="sort_a" sort="saleCount" href="/static/search/#"
th:attr="style=${(!#strings.isEmpty(p) &&  #strings.startsWith(p,'saleCount') )?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#FFF' }"
                               th:class="${(!#strings.isEmpty(p)    &&  #strings.startsWith(p,'saleCount')                 &&   #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'  }"
                            >
                                销量
                            </a>
                            <a  class="sort_a" sort="skuPrice" href="/static/search/#"
th:attr="style=${(!#strings.isEmpty(p) &&  #strings.startsWith(p,'skuPrice') )?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#FFF' }"
                                th:class="${(!#strings.isEmpty(p)    && #strings.startsWith(p,'skuPrice')                  &&   #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'  }"
                            >价格</a>
                            <a class="sort_a"  href="/static/search/#">评论分</a>
                            <a  class="sort_a" href="/static/search/#">上架时间</a>
                            <input style="width: 100px; margin-left:30px;"  id="skuPriceFrom"  type="number" th:value="${#strings.isEmpty(priceRange)?'':#strings.substringBefore(priceRange,'_')}">
                            - <input style="width: 100px"  id="skuPriceTo" type="number"
                                     th:value="${#strings.isEmpty(priceRange)?'':#strings.substringAfter(priceRange,'_')}"
                        >
                            <button  id="skuPriceSearchBtn">确定</button>
                        </div>
                        <div class="filter_top_right">
                            <span class="fp-text">
                               <b>1</b><em>/</em><i>169</i>
                           </span>
                            <a href="/static/search/#" class="prev"><</a>
                            <a href="/static/search/#" class="next"> > </a>
                        </div>
                    </div>
                    <!--收货地址-->
                    <div class="filter_bottom">
                        <div class="filter_bottom_left">
                            <div class="fs-cell">收货地</div>
                            <div class="dizhi">
                                <div class="dizhi_show">
                                    <em>北京朝阳区三环以内</em>
                                    <b></b>
                                </div>
                            </div>
                            <div class="dizhi_con">
                                <ul id="tab">
                                    <li id="tab1" value="1">北京 <img src="/static/search/image/down-@1x.png" alt=""></li>
                                    <li id="tab2" value="2">朝阳 <img src="/static/search/image/down-@1x.png" alt=""></li>
                                    <li id="tab3" value="3">三环以内 <img src="/static/search/image/down-@1x.png" alt=""></li>
                                </ul>
                                <div id="container">
                                </div>
                            </div>
                        </div>
                        <div class="filter_bottom_right">
                            <ul>
                                <li>
                                    <a href="/static/search/#">
                                        <i></i>
                                        谷粒商城配送
                                    </a>
                                </li>
                                <li>
                                    <a href="/static/search/#">
                                        <i></i>
                                        京尊达                                    </a>
                                </li>
                                <li>
                                    <a href="/static/search/#">
                                        <i></i>
                                        货到付款
                                    </a>
                                </li>
                                <li>
                                    <a href="#"  th:with="check=${param.hasStock}">
                                      <input  id="showHasStock" type="checkbox"  th:checked="${#strings.equals(check,'1')}">
                                        仅显示有货
                                    </a>
                                </li>
                                <li>
                                    <a href="/static/search/#">
                                        <i></i>
                                        可配送全球
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--排序内容-->
                    <div class="rig_tab">
                        <div  th:each="product : ${result.getProducts()}">
                            <div class="ico">
                                <i class="iconfont icon-weiguanzhu"></i>
                                <a href="/static/search/#">关注</a>
                            </div>
                            <p class="da">
                                <a th:href="|http://item.gulimall.com/${product.skuId}.html|"   >
                                    <img th:src="${product.skuImg}" class="dim">
                                </a>
                            </p>
                            <ul class="tab_im">
                                <li><a href="/static/search/#" title="黑色">
                                    <img th:src="${product.skuImg}"></a></li>
                            </ul>
                            <p class="tab_R">
                                <span  th:text="'¥'+${product.skuPrice}">¥5199.00</span>
                            </p>
                            <p class="tab_JE">
                                <a  th:href="|http://item.gulimall.com/${product.skuId}.html|"  th:utext="${product.skuTitle}">
                                    Apple iPhone 7 Plus (A1661) 32G 黑色 移动联通电信4G手机
                                </a>
                            </p>
                            <p class="tab_PI">已有<span>11万+</span>热门评价
                                <a href="/static/search/#">二手有售</a>
                            </p>
                            <p class="tab_CP"><a href="/static/search/#" title="谷粒商城Apple产品专营店">谷粒商城Apple产品...</a>
                                <a href='#' title="联系供应商进行咨询">
                                    <img src="/static/search/img/xcxc.png">
                                </a>
                            </p>
                            <div class="tab_FO">
                                <div class="FO_one">
                                    <p>自营
                                        <span>谷粒商城自营,品质保证</span>
                                    </p>
                                    <p>满赠
                                        <span>该商品参加满赠活动</span>
                                    </p>
                                </div>
                            </div>
                        </div >
                    </div>
                    <!--分页-->
                    <div class="filter_page">
                        <div class="page_wrap">
                            <span class="page_span1">
                                <a  class="page_a"  th:attr="pn=${result.pageNum - 1}" th:if="${result.pageNum>1}"> < 上一页</a>
                                <a  class="page_a"
                                    th:attr="pn=${nav},style=${nav == result.pageNum?'border: 0 ; color:#ee2222;background: #fff':''}"
                                th:each="nav :  ${result.pageNavs}"
                                >[[${nav}]]</a>
                                <a  class="page_a"    th:attr="pn=${result.pageNum + 1}" th:if="${result.pageNum<result.totalPages}">下一页 ></a>
                            </span>
                            <span class="page_span2">
                                <em>共<b>[[${result.totalPages}]]</b>页&nbsp;&nbsp;到第</em>
                                <input type="number" value="1">
                                <em>页</em>
                                <a class="page_submit"  >确定</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--商品精选-->
<div class="JD_jx">
</div>
<script>
    $(".sl_ext a:nth-child(1)").hover(function(){
        $(this).children("b").stop(true).animate({top:"3px"},50);
        $(this).children("i").stop(true).animate({top:"-23px"},50)
    },function(){
        $(this).children("b").stop(true).animate({top:"24px"},50);
        $(this).children("i").stop(true).animate({top:"3px"},50)
    });
    $(".sl_ext a:nth-child(2)").hover(function(){
        $(this).children("span").stop(true).animate({top:"-1px"},100);
        $(this).children("i").stop(true).animate({top:"-14px"},100).css({display:"none"})
    },function(){
        $(this).children("span").stop(true).animate({top:"14px"},100);
        $(this).children("i").stop(true).animate({top:"-1px"},100).css({display:"block"})
    });
    $('.tab_im img').hover(function(){
        var a=$(this).prop('src');
        var index=$(this).parents('li').index();
        $(this).parents('li').css('border','2px solid red').siblings('li').css('border','1px solid #ccc');
        $(this).parents('ul').prev().find('img').prop('src',a);
        $(this).parents('ul').siblings('.tab_JE').find('a').eq(index).css('display','block').siblings('a').css('display','none');
        $(this).parents('ul').siblings('.tab_R').find('span').eq(index).css('display','block').siblings('span').css('display','none')
    });
    $(".JD_ipone_one").hover(function(){
        $(this).children("div").css({display:"block"})
    },function(){
        $(this).children("div").css({display:"none"})
    });
    $("#tab>li").click(function() {
        var i = $(this).index();
        $("#container>div").hide().eq(i).show()
    });
    $(".dizhi_show").hover(function(){
        $(".dizhi_con").css({display:"block"})
    },function(){
        $(".dizhi_con").css({display:"none"})
    });
    $(".dizhi_con").hover(function(){
        $(this).css({display:"block"})
    },function(){
        $(this).css({display:"none"})
    });
    //显示隐藏
    var $li = $(".JD_nav_logo>div:gt(3)").hide();
    $('.JD_show span').click(function(){
        if($li.is(':hidden')){
            $li.show();
            $(this).css({width:"86px"}).text('收起 ^');
        }else{
            $li.hide();
            $('.JD_show span').css({width:"291px"}).text('更多选项（ CPU核数、网络、机身颜色 等）');
        }
        return false;
    });
    $(".rig_tab>div").hover(function(){
        var i = $(this).index();
        $(this).find('.ico').css({display:'block'}).stop(true).animate({top:"190px"},300)
    },function(){
        var i = $(this).index();
        $(this).find('.ico').css({display:'none'}).stop(true).animate({top:"230px"})
    });
    $('.header_main_left>ul>li').hover(function() {
        $(this).css({
            background: "#f0f0f0"
        }).find('.header_main_left_main').stop(true).fadeIn(300)
    }, function() {
        $(this).css({
            background: "#fff"
        }).find(".header_main_left_a").css({
            color: "#000"
        });
        $(this).find('.header_main_left_main').stop(true).fadeOut(100)
    });
    $(".header_sj a").hover(function() {
        $(this).css({
            background: "#444"
        })
    }, function() {
        $(this).css({
            background: "#6e6568"
        })
    });
    $(".nav_li1 a").hover(function(){
        $(".header_main_left").stop(true).fadeIn()
    },function(){
        $(".header_main_left").stop(true).fadeOut()
    });
    $(".header_main_left").hover(function(){
        $(this).stop(true).fadeIn()
    },function(){
        $(this).stop(true).fadeOut()
    });
    //右侧侧边栏
    $(".header_bar_box ul li").hover(function() {
        $(this).css({
            background: "#7A6E6E"
        }).children(".div").css({
            display: "block"
        }).stop(true).animate({
            left: "-60px"
        }, 300)
    }, function() {
        $(this).css({
            background: "#7A6E6E"
        }).children(".div").css({
            display: "none"
        }).stop(true).animate({
            left: "0"
        }, 300)
    });
    //底部
    $(".footer_foot .p1 a").hover(function(){
        $(this).css("color","#D70B1C")
    },function(){
        $(this).css("color","#727272")
    });
    $(".footer .footer_center ol li a").hover(function(){
        $(this).css("color","#D70B1C")
    },function(){
        $(this).css("color","#727272")
    })
</script>
</body>
<script>
    function searchProducts(name,value){
   location.href= replaceAndAddParamVal(location.href,name,value,true)
    }
    function   searchByKeyword(){
        searchProducts("keyword",$("#keyword_input").val())
    }
    $(".page_a").click(function () {
        var   pn =$(this).attr("pn")
        var  href=   location.href;
        if(href.indexOf("pageNum") != -1){
            //替换pageNum的值
            location.href   =   replaceParamVal(href,"pageNum",pn);
        }else{
        location.href=   location.href + "&pageNum=" +pn;
        }
        return false
    })
    function    replaceAndAddParamVal(url,paramName,replaceVal,forceAdd){
        var oUrl=url.toString();
        if(oUrl.indexOf(paramName)!=-1){
        if(forceAdd){
            var nUrl= ""
            if(oUrl.indexOf("?") != -1){
                //替换pageNum的值
                nUrl =oUrl  +  "&"  + paramName  + "="  +replaceVal
            }else{
                nUrl =oUrl  +  "?"  + paramName  + "="  +replaceVal
            }
            return   nUrl
        }else{
            var  re=eval('/('+ paramName +'=)([^&]*)/gi');
            var  nUrl=  oUrl.replace(re,paramName+'='+replaceVal)
            return   nUrl;
        }
        }else{
            var nUrl= ""
            if(oUrl.indexOf("?") != -1){
                //替换pageNum的值
                nUrl =oUrl  +  "&"  + paramName  + "="  +replaceVal
            }else{
                nUrl =oUrl  +  "?"  + paramName  + "="  +replaceVal
            }
            return   nUrl
        }
    }
$(".sort_a").click( function () {
    // 改变当前元素以及兄弟元素的样式
    changeStyle(this)
    $(this).toggleClass("desc")
    var  sort=  $(this).attr("sort")
 sort  =     $(this).hasClass("desc")?sort+"_desc":sort+"_asc";
        location.href  =    replaceAndAddParamVal(location.href,"sort",sort)
    //  禁用默认行为
    return  false;
})
    function   changeStyle(ele){
        $(".sort_a").css({"color":"#333","border-color":"#CCC","background":"#FFF"})
        $(".sort_a").each(  function () {
            var text  =$(this).text().replace("↓","").replace("↑","")
            $(this).text(text)
        } )
        $(ele).css({"color":"#FFf","border-color":"#e4393c","background":"#e4393c"})
        //  改变升降序
        $(ele).toggleClass("desc");// 加上就是降序    不加就是升序
        if( $(ele).hasClass("desc") ){
            var text  =$(ele).text().replace("↓","").replace("↑","")
            text  =text + "↓"
            $(ele).text(text)
        }else{
            var text  =$(ele).text().replace("↓","").replace("↑","")
            text  =text + "↑"
            $(ele).text(text)
        }
    }
    $("#skuPriceSearchBtn").click(function (){
        var from  =$("#skuPriceFrom").val()
        var  to =  $("#skuPriceTo").val()
        var query  = from   + "_"  +to;
      location.href   =   replaceAndAddParamVal(location.href,"skuPrice",query)
    })
$("#showHasStock").change(function () {
    if($(this).prop('checked')){
        location.href   =      replaceAndAddParamVal(location.href,"hasStock",1)
    }else{
        var  re=eval('/(hasStock=)([^&]*)/gi');
        location.href=(location.href+"").replace(re,'');
    }
    return  false;
})
</script>
</html>